<!DOCTYPE html>
<html>
<head>
    <title>LIDAR 可视化</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="info">正在连接服务器...</div>
    <script>
        // 初始化Three.js
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 初始化点云
        let pointCloud = null;
        function updatePointCloud(points) {
            if (pointCloud) scene.remove(pointCloud);

            const geometry = new THREE.BufferGeometry();
            geometry.setAttribute('position', new THREE.Float32BufferAttribute(points.flat(), 3));

            const material = new THREE.PointsMaterial({
                size: 0.5,
                color: 0x00ff00
            });

            pointCloud = new THREE.Points(geometry, material);
            scene.add(pointCloud);
        }

        // 连接服务器
        const socket = io('http://192.168.123.18:6009');

        socket.on('connect', () => {
            document.getElementById('info').textContent = '已连接服务器';
        });

        socket.on('lidar_data', (data) => {
            document.getElementById('info').textContent =
                `帧ID: ${data.frame_id} | 点数: ${data.points.length}`;
            updatePointCloud(data.points);
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>